const data = {
  nodes: [{
    id: 'node1',
    x: 50,
    y: 250
  },{
    id: 'node2',
    x: 450,
    y: 250
  }],
  edges: [{
    id: 'edge1',
    shape: 'customEdge',
    target: 'node2',
    source: 'node1'
  }]
};
G6.registerEdge('horizontal-smooth', {
  getPath(item) {
    debugger
    var points = item.getPoints();
    var start = points[0];
    var end = points[points.length - 1];
    var hgap = Math.abs(end.x - start.x);
    if (end.x > start.x) {
      return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]];
    }
    return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]];
  }
});
G6.registerEdge('customEdge', {
  endArrow: {
    path(item) {
      const keyShape = item.getKeyShape();
      let lineWidth = keyShape.attr('lineWidth');
      lineWidth = lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE;
      const width = lineWidth * 10 / 3;
      const halfHeight = lineWidth * 4 / 3;
      const radius = lineWidth * 4;
      return [
      [ 'M', -width, halfHeight ],
      [ 'L', 0, 0 ],
      [ 'L', -width, -halfHeight ],
      [ 'A', radius, radius, 0, 0, 1, -width, halfHeight ],
      [ 'Z' ]
      ];
    },
    shorten(item) {
      const keyShape = item.getKeyShape();
      const lineWidth = keyShape.attr('lineWidth');
      return (lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE) * 3.1;
    },
    style(item) {
      const keyShape = item.getKeyShape();
      const { strokeOpacity, stroke } = keyShape.attr();
      return {
        fillOpacity: strokeOpacity,
        fill: stroke
      };
    }
   }
});
// G6.registerEdge('custom-line', {
//   draw(item) {
//     const group = item.getGraphicGroup();
//     const path = this.getPath(item);
//     return group.addShape('path', {
//       attrs: {
//         path,
//         stroke: 'red'
//       }
//     });
//   },
//   getPath(item) {
//     const points = item.getPoints();
//     return Util.pointsToPolygon(points);
//   }
// });
const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500
});
graph.edge({
  label(model) {
    return model.shape;
  },
  color: 'red',
  size: 1
});
graph.read(data);